<template>
	<div class="video">
	    <div class="container">
	        <div class="videolist">
	            <div class="vtit">{{video.videoTitle}}</div>
	            <div class="vtime">
					<!-- <div>{{video_src}} - {{video}}</div> -->
	                <div class="video_date">发布日期: {{video.releaseTime}}</div>
	                <div class="video_hits">点击量: {{video.numberOfHits}}</div>
	                <div class="video_time">时长: {{video.videoTime}}</div>
	                <div class="video_author">作者: {{video.author.college+' '+video.author.name}}</div>
	            </div>
                <video class="myVideo" :src="video_src" controls controlslist="nodownload"></video>
	            <!-- <div class="sorry">T_T抱歉，该浏览器暂不支持该格式，可前往IE或者360浏览器进行播放！</div> -->
	            <!-- <video id="videojs-flvjs-player"  class="video-js vjs-default-skin vjs-big-play-centered" width="1200" height="600"></video> -->
	        </div>
	    </div>
	</div>
</template>

<script>
import video_url from '../components/video/user/url'
import file_path from '../components/video/user/file_url'
export default {
    data(){
        return{
			id: this.$route.query.id,
			video_src: '',
			video:{},
        }
    },
    methods:{
        playVideo(){
            var suffix = this.flvUrl.split(".")[1];
            if(suffix == "mp4"){
                this.player = videojs(document.getElementById("videojs-flvjs-player"), {
                        techOrder: ['html5', 'flvjs'],
                        flvjs: {
                            mediaDataSource: {
                                isLive: true,
                                cors: true,
                                withCredentials: false,
                            },
                        },
                        sources: [{
                            src: this.flvUrl,
                            type: 'video/mp4'
                        }],
                        controls: true,
                        preload: "none"
                    }, () => {
                        this.player.on('error', (err) => {
                            console.log('first source load fail')
                            this.player.ready(() => {
                                this.player.load();
                                this.player.play();
                            });
                        })
                    });
            }else{
                this.player = videojs(document.getElementById("videojs-flvjs-player"), {
                    techOrder: ['html5', 'flvjs'],
                    flvjs: {
                        mediaDataSource: {
                            isLive: true,
                            cors: true,
                            withCredentials: false,
                        },
                    },
                    sources: [{
                        src: this.flvUrl,
                        type: 'video/x-flv'
                    }],
                    controls: true,
                    preload: "none"
                }, () => {
                    this.player.on('error', (err) => {
                        console.log('first source load fail')
                        this.player.ready(() => {
                            this.player.load();
                            this.player.play();
                        });
                    })
                });
            }
        },
		getVideo(){
			this.$axios({
				url: video_url[6].url,
				params:{
					id: this.id
				}
			}).then(res => {
				this.video = res.data;
				this.video_src = file_path[0]+this.video.videoFilePath;
                // console.log(this.video);
				// console.log(this.video_src);
            })
		}
    },
    created(){
        // this.playVideo();
		this.getVideo();
    }
		
}
</script>

<style scoped>
	.video{
		background-color: red;
		margin-left:280px;
		/* margin-top: 20px; */
	}
	.videolist { position:relative; float:left; width:1000px; height:650px; margin-bottom:30px;}
	.videolist:hover{ cursor: pointer; }
	.videoed { display:none; width:50px; height:50px; position: absolute; left:45%; top:45%; z-index:99; border-radius:100%; }

	.vclose {width: 25px; height: 25px; position:absolute;right:1%; top:1%; border-radius:100%; cursor: pointer; }
	.vtit{
		width: 1200px;
		height: 60px;
		padding-left: 10px;
		position: absolute;
		font-family: "微软雅黑";
		font-size: 22px;
		font-weight: bold;
		line-height: 60px;
		left: 50%;
		margin-left: -500px;
		/* top: 10px; */

		overflow:hidden;
		word-break:keep-all;
		white-space:nowrap;
		text-overflow:ellipsis;
	}
	.vtime{
		width: 1200px;
		height: 70px;
		font-family: "微软雅黑";
		font-size: 12px;
		font-weight: bold;
		line-height: 70px;
		position: absolute;
		color: #999;
		left: 50%;
		margin-left: -500px;
		margin-top: 50px;

		overflow:hidden;
		word-break:keep-all;
		white-space:nowrap;
		text-overflow:ellipsis;
	}
	.vtime>.video_date,.vtime>.video_hits,.vtime>.video_time,.vtime>.video_author{
		position: absolute;
		height: 100%;
	}
	.vtime>.video_date{
		width: 150px;
		margin-left: 25px;
	}
	.vtime>.video_hits{
		width: 100px;
		margin-left: 225px;
	}
	.vtime>.video_time{
		width: 100px;
		margin-left: 375px;
	}
	.vtime>.video_author{
		width: 200px;
		margin-left: 525px;
	}
	.video-js{
		top: 110px;
	}
	.video-js .vjs-big-play-button{
		font-size: 5em;
		line-height: 3.65em;
		height: 4em;
		width: 4em;
		-webkit-border-radius: 2.5em;
		-moz-border-radius: 2.5em;
		border-radius: 2.5em;
		background-color: #73859f;
		background-color: rgba(115,133,159,.5);
		border-width: 0.15em;
		margin-top: -2.5em;
		margin-left: -2.5em;
	}
	/* 中间的播放箭头 */
	.vjs-big-play-button .vjs-icon-placeholder {
		font-size: 1.63em;
	}
	/* 加载圆圈 */
	.vjs-loading-spinner {
		font-size: 2.5em;
		width: 2em;
		height: 2em;
		border-radius: 1em;
		margin-top: -2em;
		margin-left: -2em;
	}
	.vjs-paused .vjs-big-play-button,
	.vjs-paused.vjs-has-started .vjs-big-play-button {
		display: block;
	}
	.video-js .vjs-time-control{display:block;}
	.video-js .vjs-remaining-time{display: none;}

    /* 当前使用 */
    .myVideo{
        width: 1000px;
        height: 600px;
        margin-top: 110px;
		/* margin-left: 100px; */
		background-color: #000;
		padding-bottom: 20px;
    }
    video::-internal-media-controls-download-button {
        display:none;
    }
    video::-webkit-media-controls-enclosure {
        overflow:hidden;
    }
    video::-webkit-media-controls-panel {
        width: calc(100% + 50px); 
    }
</style>